<template>
  <div v-if="show" class="modal-overlay" @click="closeModal">
    <div class="modal-container" @click.stop>
      
      <div class="modal-content">
        <section class="section">
          <h3>1. 引言</h3>
          <p>恒生电子股份有限公司（以下简称"我们"）非常重视用户的隐私保护。本隐私政策详细说明了我们如何收集、使用、存储和保护您的个人信息。</p>
          <p>请您仔细阅读本隐私政策，了解我们对您个人信息的处理方式。如果您不同意本隐私政策的任何内容，请不要使用我们的服务。</p>
        </section>

        <section class="section">
          <h3>2. 信息收集</h3>
          <h4>2.1 我们收集的信息类型</h4>
          <ul>
            <li><strong>账户信息：</strong>用户名、邮箱地址、密码（加密存储）</li>
            <li><strong>使用信息：</strong>登录记录、操作日志、查询记录</li>
            <li><strong>知识内容：</strong>您上传的文档、问答内容、知识库数据</li>
            <li><strong>技术信息：</strong>IP地址、设备信息、浏览器类型、操作系统</li>
            <li><strong>反馈信息：</strong>您提供的建议、意见、问题反馈</li>
          </ul>

          <h4>2.2 信息收集方式</h4>
          <ul>
            <li>您主动提供的信息（注册、上传内容等）</li>
            <li>系统自动收集的信息（使用记录、技术信息等）</li>
            <li>第三方授权获取的信息（如企业认证信息）</li>
          </ul>
        </section>

        <section class="section">
          <h3>3. 信息使用</h3>
          <p>我们收集您的个人信息用于以下目的：</p>
          <ul>
            <li><strong>提供服务：</strong>为您提供知识管理、智能问答等服务</li>
            <li><strong>账户管理：</strong>创建和管理您的账户，验证身份</li>
            <li><strong>个性化服务：</strong>根据您的使用习惯提供个性化推荐</li>
            <li><strong>系统优化：</strong>分析使用数据，改进系统功能和性能</li>
            <li><strong>安全保障：</strong>检测和防范安全威胁，保护系统安全</li>
            <li><strong>法律合规：</strong>遵守相关法律法规要求</li>
          </ul>
        </section>

        <section class="section">
          <h3>4. 信息存储与保护</h3>
          <h4>4.1 存储方式</h4>
          <ul>
            <li>采用加密技术存储敏感信息</li>
            <li>数据存储在安全的服务器环境中</li>
            <li>定期备份重要数据</li>
            <li>设置访问权限控制</li>
          </ul>

          <h4>4.2 安全措施</h4>
          <ul>
            <li>使用SSL/TLS加密传输数据</li>
            <li>实施访问控制和身份验证</li>
            <li>定期进行安全审计和漏洞扫描</li>
            <li>建立数据泄露应急响应机制</li>
          </ul>
        </section>

        <section class="section">
          <h3>5. 信息共享与披露</h3>
          <p>我们承诺不会出售、出租或以其他方式向第三方披露您的个人信息，除非：</p>
          <ul>
            <li>获得您的明确同意</li>
            <li>法律法规要求或政府机关要求</li>
            <li>为保护我们的合法权益</li>
            <li>与可信的第三方服务提供商共享（在严格保密协议下）</li>
          </ul>
        </section>

        <section class="section">
          <h3>6. 您的权利</h3>
          <p>根据相关法律法规，您享有以下权利：</p>
          <ul>
            <li><strong>查询权：</strong>了解我们收集和使用您个人信息的情况</li>
            <li><strong>更正权：</strong>要求我们更正不准确的个人信息</li>
            <li><strong>删除权：</strong>要求我们删除您的个人信息</li>
            <li><strong>撤回同意：</strong>撤回您对个人信息处理的同意</li>
            <li><strong>数据可携带权：</strong>要求我们以结构化、通用格式提供您的数据</li>
          </ul>
        </section>

        <section class="section">
          <h3>7. Cookie和类似技术</h3>
          <p>我们使用Cookie和类似技术来：</p>
          <ul>
            <li>记住您的登录状态</li>
            <li>保存您的偏好设置</li>
            <li>分析系统使用情况</li>
            <li>提供个性化服务</li>
          </ul>
          <p>您可以通过浏览器设置管理Cookie，但禁用Cookie可能影响部分功能的使用。</p>
        </section>

        <section class="section">
          <h3>8. 数据保留</h3>
          <p>我们仅在必要期间内保留您的个人信息：</p>
          <ul>
            <li>账户信息：在您使用服务期间及注销后6个月</li>
            <li>使用记录：保留12个月用于系统优化</li>
            <li>知识内容：根据您的设置或法律要求</li>
            <li>法律要求：根据相关法律法规要求保留</li>
          </ul>
        </section>

        <section class="section">
          <h3>9. 未成年人保护</h3>
          <p>我们的服务主要面向企业用户。如果您是未成年人，请在监护人指导下使用我们的服务。我们不会故意收集未成年人的个人信息。</p>
        </section>

        <section class="section">
          <h3>10. 隐私政策更新</h3>
          <p>我们可能会不时更新本隐私政策。重大变更时，我们会通过系统通知或其他方式告知您。继续使用我们的服务即表示您同意更新后的隐私政策。</p>
        </section>

        <section class="section">
          <h3>11. 联系我们</h3>
          <p>如果您对本隐私政策有任何疑问或建议，请通过以下方式联系我们：</p>
          <ul>
            <li>公司名称：恒生电子股份有限公司</li>
            <li>地址：浙江省杭州市滨江区江南大道3588号</li>
            <li>客服电话：400-888-8888</li>
            <li>邮箱：privacy@hundsun.com</li>
            <li>数据保护官：dpo@hundsun.com</li>
          </ul>
        </section>
      </div>
      
      <div class="modal-footer">
        <button class="agree-btn" @click="agreeAndClose">我已阅读并同意</button>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['close', 'agree'])

function closeModal() {
  emit('close')
}

function agreeAndClose() {
  emit('agree')
  emit('close')
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-container {
  background: white;
  border-radius: 12px;
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}

.modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  line-height: 1.6;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.modal-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.section {
  margin-bottom: 24px;
}

.section h3 {
  color: #1f2937;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e5e7eb;
}

.section h4 {
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  margin: 16px 0 8px;
}

.section p {
  color: #4b5563;
  margin: 0 0 12px;
  font-size: 14px;
}

.section ul {
  margin: 8px 0;
  padding-left: 20px;
}

.section li {
  color: #4b5563;
  margin: 6px 0;
  font-size: 14px;
}

.section strong {
  color: #1f2937;
  font-weight: 600;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: center;
  background: #f9fafb;
  border-radius: 0 0 12px 12px;
}

.agree-btn {
  background: linear-gradient(135deg, #10b981, #22c55e);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.agree-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}


@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (max-width: 768px) {
  .modal-overlay {
    padding: 10px;
  }
  
  .modal-container {
    max-height: 95vh;
  }
  
  
  .modal-content {
    padding: 20px;
  }
  
  .modal-footer {
    padding: 12px 20px;
    flex-direction: column;
  }
  
  .agree-btn,
  .cancel-btn {
    width: 100%;
  }
}
</style>
